<!DOCTYPE html>
<html>
<head>
    <title>打印设备标签</title>
    <style>
        @media print {
            .no-print { 
                display: none; 
            }
            @page {
                size: 100mm 40mm landscape;
                margin: 0;
            }
            body {
                margin: 0;
                padding: 0;
                background: none;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            .label-container {
                margin: 0 !important;
                padding: 0 !important;
                background: none !important;
                box-shadow: none !important;
                width: 100mm !important;
            }
            .label {
                margin: 0 !important;
                padding: 0 !important;
                border: none !important;
                box-shadow: none !important;
                width: 100mm !important;
                height: 40mm !important;
                page-break-after: always;
                page-break-inside: avoid;
            }
        }

        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            min-height: 100vh;
        }

        .label-container {
            width: 100mm;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .label {
            width: 100mm;
            height: 40mm;
            position: relative;
            background: white;
            margin-bottom: 20px;
        }

        .label:last-child {
            margin-bottom: 0;
        }

        .text-content {
            position: absolute;
            left: 5mm;
            top: 5mm;
            width: 60mm;
        }

        .info-row {
            margin: 0 0 2mm 0;
            font-size: 9pt;
            line-height: 1.5;
        }

        .info-row strong {
            display: inline-block;
            width: 4.5em;
        }

        .qr-code {
            position: absolute;
            right: 1mm;
            top: 3mm;
            width: 30mm;
            height: 30mm;
        }

        .qr-code svg {
            width: 30mm !important;
            height: 30mm !important;
        }

        .controls {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }

        .btn {
            padding: 10px 20px;
            color: white;
            border: none;
            cursor: pointer;
            margin-left: 10px;
            border-radius: 4px;
        }

        .btn-print {
            background-color: #4CAF50;
        }

        .btn-close {
            background-color: #f44336;
        }

        #printFrame {
            display: none;
        }
    </style>
</head>
<body>
    <div class="label-container">
        @foreach($devices as $device)
        <div class="label">
            <div class="text-content">
                <div class="info-row"><strong>资产编号</strong>{{ $device->Asset_Number }}</div>
                <div class="info-row"><strong>设备名称</strong>{{ $device->Name }}</div>
                <div class="info-row"><strong>位置</strong>{{ $device->place ? $device->place->place : '未知' }}</div>
                <div class="info-row"><strong>型号</strong>{{ $device->Model }}</div>

                <!-- <div class="info-row"><strong>使用人</strong>{{ $device->User_id }}</div>
                <div class="info-row"><strong>状态</strong>{{ $device->State }}</div> -->
            </div>
            <div class="qr-code">
                {!! QrCode::size(113)->generate(config('app.url').'/api/devices?asset_number='.$device->Asset_Number) !!}
            </div>
        </div>
        @endforeach
    </div>

    <div class="controls no-print">
        <button class="btn btn-print" onclick="printLabels()">打印标签</button>
        <button class="btn btn-close" onclick="window.close()">关闭</button>
    </div>

    <iframe id="printFrame" name="printFrame"></iframe>

    <script>
    function printLabels() {
        var printContent = document.querySelector('.label-container').innerHTML;
        var frame = document.getElementById('printFrame');
        var frameDoc = frame.contentWindow.document;

        frameDoc.open();
        frameDoc.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>打印标签</title>
                <style>
                    @page {
                        size: 100mm 40mm;
                        margin: 0;
                    }
                    body {
                        margin: 0;
                        padding: 0;
                    }
                    .label {
                        width: 100mm;
                        height: 40mm;
                        position: relative;
                        page-break-after: always;
                        page-break-inside: avoid;
                    }
                    .text-content {
                        position: absolute;
                        left: 5mm;
                        top: 5mm;
                        width: 60mm;
                    }
                    .info-row {
                        margin: 0 0 2mm 0;
                        font-size: 9pt;
                        line-height: 1.5;
                    }
                    .info-row strong {
                        display: inline-block;
                        width: 4.5em;
                    }
                    .qr-code {
                        position: absolute;
                        right: 5mm;
                        top: 5mm;
                        width: 30mm;
                        height: 30mm;
                    }
                    .qr-code svg {
                        width: 30mm !important;
                        height: 30mm !important;
                    }
                </style>
            </head>
            <body>${printContent}</body>
            </html>
        `);
        frameDoc.close();

        setTimeout(function() {
            frame.contentWindow.focus();
            frame.contentWindow.print();
        }, 500);
    }
    </script>
</body>
</html>